<template>
	<!--选择日期的弹层-->
	<u-popup :round="30" bgColor='transparent' :show="show" @close="close" @open="open">
		<view class="popup_day">
			<switching @switchingTime='switchingTime' />
			<!--星期几-->
			<view style="height: 50rpx;"></view>
			<view class="week">
				<view class="item">一</view>
				<view class="item">二</view>
				<view class="item">三</view>
				<view class="item">四</view>
				<view class="item">五</view>
				<view class="item">六</view>
				<view class="item">日</view>
			</view>
			<view class="day">
				<view class="item_no" v-for="item in dayWeek -2"></view>
				<view class="item_no"></view>
				<view :class="[
				dataDateGrouping.get(index +1),
				{item:true},
				{active: index==selectDayIndex},
				{forbidden: isForbiddenDay(index)}]" v-for="(item,index) in lastDayMonth"
					@click="!isForbiddenDay(index) ? selectDayIndex=index :index=index">{{ index+1 }}</view>
			</view>
			<view class="btn" @click="verifyDay">确定</view>
		</view>
	</u-popup>
</template>

<script>
	import {
		searchDayAvgData
	} from '@/config/api.js';
	export default {
		name: "data_select",
		props: {
			show: {
				type: Boolean,
				default: false,

			},
		},
		data() {
			return {
				//记录当月一号是星期几
				dayWeek: 0,
				selectDayIndex: new Date().getDate() -1,
				lastDayMonth: 0,
				month: new Date().getMonth() + 1,
				//日期分组
				dataDateGrouping: new Map(),
				backgroundColor: ['normal', 'warn', 'wechat'],
				//查询图表数据的日期单位
				dateUnit: {
					day: "day",
					month: "month",
					year: "year"
				},
			};
		},
		//创建后的声明周期
		created() {
			this.getMonthLastDay();

			//初始化查询
			let mac = this.vuex_select_equipment.mac
			let date = this.formatDateTime(new Date(), "yyyy-MM-dd")
			this.searchDayAvg(date, this.dateUnit.day, mac);
		},
		methods: {

			//查询一段时间内总数据的平均值
			async searchDayAvg(date, timeUnit, equipmentMac) {
				console.log("查询日期是---->", date);
				let queryParam = {
					date,
					timeUnit,
					equipmentMac
				};
				const resp = await searchDayAvgData(queryParam);
				console.log("--searchDayAvgData(queryParam)-->",resp);
				//对查询出的数据进行处理
				this.dataProcessing(resp.data.items);
			},


			//数据处理
			dataProcessing(items) {
				this.dataDateGrouping = new Map();
				//传感器日 月 年平均值
				let dataOne = items[0];
				//警告值1
				let warningValueOne = dataOne.alarm_rang.split(':');
				let dataTwo = items[1];
				//警告值2
				let warningValueTwo = dataTwo.alarm_rang.split(':');
				//循环处理数据
				for (var i = 0; i < dataOne.data.length; i++) {
					if (dataOne.data[i] != null) {
						let leveOne = this.getDangerGrade(dataOne.data[i], warningValueOne);
						let leveTwo = this.getDangerGrade(dataOne.data[i], warningValueTwo);
						if (leveOne > leveTwo) {
							this.dataDateGrouping.set(i, this.backgroundColor[leveOne]);
						} else {
							this.dataDateGrouping.set(i, this.backgroundColor[leveTwo]);
						}
					} else {
						this.dataDateGrouping.set(i, "");
					}

				}
			},

			//判断数值的危险等级
			getDangerGrade(currentValue, dangerNumbers) {
				for (var i = 0; i < dangerNumbers.length; i++) {
					if (parseFloat(currentValue) < parseInt(dangerNumbers[i])) {
						return i; //危险等级 0 良好 1  警告 2 超标
					}
				}
				//如果全部都是大于就是最危险的等级
				return 2;

			},
			//关闭弹出层 
			close() {
				this.$emit('closeOrOpenSelectData', false)
			},

			//开启弹出层
			open() {
				this.$emit('closeOrOpenSelectData', true)
			},


			//获取每个月的1号是 星期几?
			getFirstDayOfWeek(year, month) {
				// 创建一个日期对象，参数为指定的年份和月份（月份从0开始，所以需要减去1）
				var date = new Date(year, month - 1, 1);

				// 获取星期几，返回值为0-6，其中0表示星期日，1表示星期一，以此类推
				var dayOfWeek = date.getDay();

				return dayOfWeek;
			},

			//子组件日期切换调用的方式
			switchingTime(data) {
				this.selectDayIndex = 0;
				//获取当前日期
				var date = new Date();
				let queryDate;
				this.getMonthLastDay(data - 1);
				this.month = data;
				//查询平均值数据  
				queryDate = this.formatDateTime(new Date(date.getFullYear(), this.month - 1, 1), "yyyy-MM-dd");
				this.searchDayAvg(queryDate, this.dateUnit.day, this.vuex_select_equipment.mac);
			},

			//获取到当月最后一天
			getMonthLastDay(monthParan) {
				var monthNew = monthParan ? monthParan : new Date().getMonth();
				let year = this.formatDateTime(new Date(), "yyyy");
				let month = this.formatDateTime(new Date(year, monthNew, 1), "MM");
				this.lastDayMonth = this.getLastDayOfMonth(year, month);
				var firstDayOfWeek = this.getFirstDayOfWeek(year, month);
				this.dayWeek = firstDayOfWeek === 0 ? 7 : firstDayOfWeek;
			},

			//获取到每个月的最后一天
			getLastDayOfMonth(year, month) {
				// 创建下个月的第一天
				var nextMonth = new Date(year, month, 1);
				// 将下个月的第一天往前推一天，即为当前月的最后一天
				var lastDay = new Date(nextMonth.getTime() - 86400000).getDate();

				return lastDay;
			},


			//是否禁用某个日期的选择 日和月
			isForbiddenDay(index) {
				var date = new Date();
				if (this.month > date.getMonth() + 1) {
					return true;
				}

				if (this.month == date.getMonth() + 1) {
					//判断天是否大于
					if (index > date.getDate() - 1) {
						return true;
					}
				}
				return false;
			},

			//自定义格式化
			formatDateTime(date, format) {
				const o = {
					'M+': date.getMonth() + 1, // 月份
					'd+': date.getDate(), // 日
					'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小时
					'H+': date.getHours(), // 小时
					'm+': date.getMinutes(), // 分
					's+': date.getSeconds(), // 秒
					'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
					S: date.getMilliseconds(), // 毫秒
					a: date.getHours() < 12 ? '上午' : '下午', // 上午/下午
					A: date.getHours() < 12 ? 'AM' : 'PM', // AM/PM
				};
				if (/(y+)/.test(format)) {
					format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
				}
				for (let k in o) {
					if (new RegExp('(' + k + ')').test(format)) {
						format = format.replace(
							RegExp.$1,
							RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
						);
					}
				}
				return format;
			},

			//确认按钮
			verifyDay() {
				console.log("选择了 几月:" + this.month + " 几号:" + this.selectDayIndex + 1);
				this.$emit('queryDataBySelectData', this.selectDayIndex + 1, this.month)
			}
		}
	}
</script>

<style scoped lang="scss">
	//日期选择 根据数值 来渲染出当天的颜色
	//数值正常显示
	.normal {
		background: rgba(103, 213, 191, 0.2);
	}

	//警告显示	
	.warn {
		background: rgba(250, 203, 35, 0.2);

	}

	//危险显示
	.wechat {
		background: rgba(246, 105, 3, 0.5);
	}
	
	.forbidden {
		color: #727272 !important;
	}


	/**日*/
	.popup_day {
		height: 1000rpx;
		background: rgb(53, 53, 53);
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;


		.week {
			display: flex;
			justify-content: space-evenly;
		}

		.day {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			padding: 1rem;
			height: 500rpx;



			.item_no {
				width: 90rpx;
				height: 60rpx;
				margin-left: 9rpx;
			}

			.active {
				border: 1px solid #BD9D5F;
			}

			.item {
				width: 88rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				margin-left: 9rpx;
				border-radius: 2px;
			}
		}

		.btn {
			width: 500rpx;
			height: 100rpx;
			background: #BD9D5F;
			border-radius: 50rpx;
			text-align: center;
			line-height: 100rpx;
			margin: 0 auto;
		}
	}

	/**月**/
	.popup_month {
		height: 900rpx;
		background: rgb(53, 53, 53);
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;

		.week {
			display: flex;
			justify-content: space-evenly;
		}

		.month {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			padding: 1rem;
			height: 500rpx;

			.item_no {
				width: 90rpx;
				height: 60rpx;
				margin-left: 9rpx;
			}

			.active {
				background: black;
			}

			.item {
				width: 120rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				margin-left: 16rpx;
			}
		}

		.btn {
			width: 500rpx;
			height: 100rpx;
			background: #BD9D5F;
			border-radius: 50rpx;
			text-align: center;
			line-height: 100rpx;
			margin: 0 auto;
		}
	}


	/**年**/
	.popup_years {
		height: 900rpx;
		background: rgb(53, 53, 53);
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;

		.week {
			display: flex;
			justify-content: space-evenly;
		}

		.years {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			padding: 0.5rem;

			.year_item {
				width: 180rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				margin-top: 20rpx;
				padding-left: 20rpx;
				padding-right: 20rpx;
			}

			.select_year {
				font-size: 20rpx;
				padding: 30rpx;
				width: 95%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 80rpx;
			}

			.item_no {
				width: 90rpx;
				height: 60rpx;
				margin-left: 9rpx;
			}

			.active {
				background: black;
			}

			.item {
				width: 120rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				margin-left: 16rpx;
			}
		}

		.btn {
			width: 500rpx;
			height: 100rpx;
			background: #BD9D5F;
			border-radius: 50rpx;
			text-align: center;
			line-height: 100rpx;
			margin: 0 auto;
		}
	}
</style>